<template>
  <div class="greenhouse-container">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <div class="nav-left">
        <div class="divider"></div>
        <el-button type="text">全部页面</el-button>
        <el-button type="text">生产监控</el-button>
      </div>
      <div class="nav-title">
        智慧大棚数字化实时监测系统
      </div>
      <div class="nav-right">
        <div class="weather">
          <span>15°</span>
          <el-icon><Cloudy /></el-icon>
        </div>
        <div class="time">{{ currentTime }}</div>
      </div>
    </div>

    <!-- 装饰线条 -->
    <div class="decoration-line">
      <div class="line-left"></div>
      <div class="line-right"></div>
    </div>

  

    <div class="main-content">
      <!-- 左侧监测区域 -->
      <div class="left-panel">
        <!-- 顶部信息区 -->
        <div class="info-section">
          <div class="info-header">
            <div class="info-item">
              <span class="label">智慧大棚编号</span>
              <span class="value highlight-red">C-01</span>
            </div>
            <div class="info-item">
              <span class="label">占地面积</span>
              <span class="value highlight-red">9.99</span>
              <span class="unit">亩</span>
            </div>
            <div class="info-item">
              <span class="label">生长阶段</span>
              <span class="value">开花结果期</span>
              <span class="phase-num highlight-red">3</span>
            </div>
          </div>
          
          <!-- 土壤监测数据 -->
          <div class="soil-data">
            <div class="soil-item">
              <span class="soil-value">{{deviceDataArr.arr[2]}}</span>
              <span class="soil-unit">us/cm</span>
              <div class="soil-label">土壤电导率</div>
            </div>
            <div class="soil-item">
              <span class="soil-value">{{deviceDataArr.arr[3]}}</span>
              <span class="soil-unit">pH</span>
              <div class="soil-label">土壤 PH 值c</div>
            </div>
            <div class="soil-item">
              <span class="soil-value">{{deviceDataArr.arr[4]}}</span>
              <span class="soil-unit"> mg/kg</span>
              <div class="soil-label">土壤含氮量</div>
            </div>
          </div>
        </div>

        <!-- 仪表盘区域 -->
        <div class="gauge-section">
          <div class="gauge-item">
            <div class="gauge-title">土壤温度</div>
            <div class="gauge-chart" ref="tempChart"></div>
            <div class="gauge-value">{{deviceDataArr.arr[1]}}°C</div>
          </div>
          <div class="gauge-item">
            <div class="gauge-title">土壤含水量</div>
            <div class="gauge-chart" ref="humidChart"></div>
            <div class="gauge-value">{{deviceDataArr.arr[0]}}%</div>
          </div>
        </div>

        <!-- 折线图区域 -->
        <div class="chart-section">
          <div class="chart-title">温度检测数据统计</div>
          <div class="chart-content" ref="lineChart"></div>
        </div>
      </div>

      <!-- 中间监控区域 -->
      <div class="center-panel">
        <!-- 实时监控 -->
        <div class="monitor-section">
          <div class="section-header">
            <div class="title">实时监控画面</div>
            <div class="time">{{ currentTime }}</div>
          </div>
          <div class="monitor-content">
            <camera-view></camera-view>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
          <el-table :data="tableData" style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
            <el-table-column prop="id" label="#" width="50" />
            <el-table-column prop="batchId" label="批次ID" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="plantDate" label="种植日期" />
            <el-table-column prop="harvestDate" label="采收日期" />
            <el-table-column prop="growthPeriod" label="生长周期" />
            <el-table-column prop="yield" label="预测产量" />
          </el-table>
        </div>
      </div>

      <!-- 右侧数据区域 -->
      <div class="right-panel">
        <!-- 网格数据区 -->
        <div class="grid-container">
          <!-- 第一行 -->
          <div class="grid-row">
            <div class="grid-item">土壤温度</div>
            <div class="grid-item">土壤湿度</div>
            <div class="grid-item">土壤盐度</div>
          </div>
          <!-- 第二行 -->
          <div class="grid-row">
            <div class="grid-item">土壤PH值</div>
            <div class="grid-item">土壤氮含量</div>
            <div class="grid-item">土壤磷含量</div>
          </div>
          <!-- 第三行 -->
          <div class="grid-row">
            <div class="grid-item">土壤钾含量</div>
            <div class="grid-item">空气温度</div>
            <div class="grid-item">空气湿度</div>
          </div>
        </div>
        <!-- 折线图区域 -->
        <div class="line-chart-section">
          <div class="chart-title">环境检测数据统计</div>
          <div class="chart-content" ref="rightLineChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, inject, reactive} from 'vue'
import { MostlyCloudy, Cloudy } from '@element-plus/icons-vue'
import CameraView from './camera.vue'
import BrokenLine from './brokenLine.vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

const $http = inject("$axios")

const currentTime = ref('')
let deviceDataArr = reactive({
 arr:[]
})
// 获取token
const getFboxToken = async () => {
  try {
    const res = await $http.post('/ysapi/subAccount/getToken', 
    {"accountId":"1ca7f0ab24ba41b291346347ec30140e"}, {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
    
    if (res.data && res.data.code == 200) {
      localStorage.setItem('token', res.data.data)
      localStorage.setItem('tokenExpires', Date.now() + 7200000) // 2小时过期
      return res.data.data
    }
    ElMessage.error(`获取萤石云token失败: ${res.data.msg || '未知错误'}`)
  } catch (error) {
    ElMessage.error('获取token失败：' + error.message)
    console.error('获取token失败：', error)
  }
  return null
}
const deviceData = async () => {
  const res = await $http.post('api/device-data/fetch-and-save', {
      boxNo: "300023040071",
      ids: [
        "327061330933584660",
        "327061330933584661",
        "327061330932536075",
        "327061330932536076",
        "327061330932536077"
      ]
  })
  deviceDataArr.arr = res.data
  console.log(deviceDataArr.arr,'deviceDataArr')
  console.log('进入了初始化')
}
const tempChart = ref(null)
const humidChart = ref(null)
const lineChart = ref(null)
const rightLineChart = ref(null)

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    weekday: 'long',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 模拟数据
const mockData = {
  temperature: 28.4,
  humidity: 61.4,
  soilData: [
    { name: '土壤含氮量', value: 7, unit: 'MG/KG' },
    { name: '土壤含磷量', value: 7, unit: 'MG/KG' },
    { name: '土壤含钾量', value: 17, unit: 'MG/KG' }
  ],
  greenhouseInfo: {
    id: 'C-01',
    area: 9.99,
    phase: '开花结果期',
    phaseNum: 3
  }
}

// 模拟温度历史数据
const mockTempHistory = {
  dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  values: [24, 26, 25, 28, 27, 29, 28]
}

// 表格数据
const tableData = ref([
  {
    id: '5',
    batchId: '23',
    productName: '黄瓜',
    plantDate: '2024-08-01',
    harvestDate: '2024-10-30',
    growthPeriod: '0.5',
    yield: '0.9'
  },
  {
    id: '6',
    batchId: '22',
    productName: '玫瑰',
    plantDate: '2024-08-01',
    harvestDate: '2024-10-30',
    growthPeriod: '0.5',
    yield: '0.9'
  },
  {
    id: '7',
    batchId: '21',
    productName: '白菜',
    plantDate: '2024-08-01',
    harvestDate: '2024-10-30',
    growthPeriod: '0.5',
    yield: '0.7'
  },
  {
    id: '8',
    batchId: '19',
    productName: '白菜',
    plantDate: '2024-08-01',
    harvestDate: '2024-10-30',
    growthPeriod: '0.5',
    yield: '0.9'
  }
])

// 表格样式
const headerStyle = {
  background: '#071526',
  color: '#33f2dc',
  borderColor: '#1890ff'
}

const cellStyle = {
  background: '#071526',
  color: '#fff',
  borderColor: '#1890ff'
}

onMounted(async () => {
  // 获取token
  await getFboxToken()
  updateTime()
  await deviceData()
  setInterval(updateTime, 1000)

  // 初始化温度仪表盘
  const tempGauge = echarts.init(tempChart.value)
  tempGauge.setOption({
    series: [{
      type: 'gauge',
      min: 0,
      max: 50,
      splitNumber: 10,
      radius: '100%',
      axisLine: {
        lineStyle: {
          width: 10,
          color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]
        }
      },
      pointer: {
        itemStyle: {
          color: '#33f2dc'
        }
      },
      axisTick: {
        distance: -12,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -12,
        length: 12,
        lineStyle: {
          color: '#fff',
          width: 3
        }
      },
      axisLabel: {
        color: '#33f2dc',
        distance: 25,
        fontSize: 12
      },
      detail: { show: false },
      data: [{
        value: mockData.temperature
      }]
    }]
  })

  // 初始化湿度仪表盘
  const humidGauge = echarts.init(humidChart.value)
  humidGauge.setOption({
    series: [{
      type: 'gauge',
      min: 0,
      max: 100,
      splitNumber: 10,
      radius: '100%',
      axisLine: {
        lineStyle: {
          width: 10,
          color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]
        }
      },
      pointer: {
        itemStyle: {
          color: '#33f2dc'
        }
      },
      axisTick: {
        distance: -12,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      splitLine: {
        distance: -12,
        length: 12,
        lineStyle: {
          color: '#fff',
          width: 3
        }
      },
      axisLabel: {
        color: '#33f2dc',
        distance: 25,
        fontSize: 12
      },
      detail: { show: false },
      data: [{
        value: mockData.humidity
      }]
    }]
  })

  // 初始化温度历史折线图
  const tempLineChart = echarts.init(lineChart.value)
  tempLineChart.setOption({
    grid: {
      top: 30,
      right: 20,
      bottom: 30,
      left: 50,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: mockTempHistory.dates,
      axisLine: {
        lineStyle: {
          color: '#33f2dc'
        }
      },
      axisLabel: {
        color: '#33f2dc'
      }
    },
    yAxis: {
      type: 'value',
      name: '温度(°C)',
      nameTextStyle: {
        color: '#33f2dc'
      },
      axisLine: {
        lineStyle: {
          color: '#33f2dc'
        }
      },
      axisLabel: {
        color: '#33f2dc'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(51, 242, 220, 0.1)'
        }
      }
    },
    series: [{
      data: mockTempHistory.values,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#33f2dc'
      },
      lineStyle: {
        color: '#33f2dc',
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(51, 242, 220, 0.3)'
        }, {
          offset: 1,
          color: 'rgba(51, 242, 220, 0.1)'
        }])
      }
    }]
  })

  // 初始化右侧折线图
  const rightChart = echarts.init(rightLineChart.value)
  rightChart.setOption({
    grid: {
      top: 30,
      right: 20,
      bottom: 30,
      left: 50,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#33f2dc'
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        lineStyle: {
          color: '#33f2dc'
        }
      },
      axisLabel: {
        color: '#33f2dc'
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(51, 242, 220, 0.1)'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#33f2dc'
        }
      },
      axisLabel: {
        color: '#33f2dc'
      }
    },
    series: [
      {
        name: 'BLSD值',
        type: 'line',
        smooth: true,
        data: [80, 70, 90, 85, 65, 95, 70],
        lineStyle: {
          color: '#33f2dc'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(51, 242, 220, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(51, 242, 220, 0.1)'
            }
          ])
        }
      }
    ]
  })

  // 更新窗口大小监听
  window.addEventListener('resize', () => {
    tempGauge.resize()
    humidGauge.resize()
    tempLineChart.resize()
    rightChart.resize()
  })
})

// 组件卸载时清理事件监听
onUnmounted(() => {
  window.removeEventListener('resize', () => {})
})
</script>

<style scoped>
.greenhouse-container {
  height: 100vh;
  background-color: #000a1e;
  color: #fff;
  padding: 0 0 20px 0;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 2px solid rgba(24,144,255,0.3);
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #33f2dc;
}

.time {
  font-size: 16px;
  color: #02a8f1;
}

.main-content {
  flex: 1;
  display: flex;
  gap: 20px;
  margin: 20px;
  overflow: auto;
}

/* 左侧面板样式 */
.left-panel {
  width: 25%;
}

.weather-card {
  background: #0a2744;
  border: 1px solid #1890ff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.weather-title {
  color: #33f2dc;
  font-size: 18px;
  margin-bottom: 15px;
}

.weather-warning {
  color: #09c5b4;
  font-size: 14px;
  margin-bottom: 20px;
}

.weather-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.temperature {
  font-size: 48px;
  color: #1890ff;
  font-weight: bold;
}

.weather-icon {
  font-size: 64px;
  color: #fff;
}

.chart-card {
  background: #0a2744;
  border: 1px solid #1890ff;
  border-radius: 8px;
  padding: 15px;
  height: 300px;
}

/* 中间面板样式 */
.center-panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.monitor-section {
  flex: 3;
  background: #071526;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #0a2744;
  border-bottom: 1px solid #33f2dc;
}

.section-header .title {
  color: #33f2dc;
  font-size: 16px;
  font-weight: bold;
}

.section-header .time {
  color: #33f2dc;
  font-size: 14px;
}

.monitor-content {
  height: calc(100% - 40px);
  padding: 10px;
}

.table-section {
  flex: 2;
  background: #071526;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  padding: 10px;
}

/* 右侧面板样式 */
.right-panel {
  width: 25%;
  padding: 10px;
  background: #071526;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.grid-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.grid-row {
  display: flex;
  gap: 10px;
}

.grid-item {
  flex: 1;
  background: #0a2744;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  padding: 15px;
  color: #33f2dc;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.grid-item:hover {
  background: #0d3450;
  transform: scale(1.02);
}

.info-section {
  background: #071526;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.highlight-red {
  color: #ff4d4f;
  font-size: 20px;
  font-weight: bold;
}

.label {
  color: #33f2dc;
  font-size: 14px;
}

.soil-data {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.soil-item {
  text-align: center;
  background: #0a2744;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #33f2dc;
}

.soil-value {
  font-size: 24px;
  color: #33f2dc;
  font-weight: bold;
}

.soil-unit {
  font-size: 12px;
  color: #888;
  margin-left: 4px;
}

.soil-label {
  color: #33f2dc;
  font-size: 14px;
  margin-top: 8px;
}

.gauge-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.gauge-item {
  width: 48%;
  background: #071526;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  padding: 15px;
}

.gauge-title {
  color: #33f2dc;
  text-align: center;
  margin-bottom: 10px;
}

.gauge-chart {
  height: 200px;
}

.gauge-value {
  text-align: center;
  color: #33f2dc;
  font-size: 20px;
  margin-top: 10px;
}

.chart-section {
  background: #071526;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  padding: 15px;
  height: 300px;
}

.chart-title {
  color: #33f2dc;
  margin-bottom: 15px;
}

.chart-content {
  height: calc(100% - 30px);
}

.line-chart-section {
  flex: 1;
  background: #071526;
  border: 1px solid #33f2dc;
  border-radius: 4px;
  padding: 15px;
  min-height: 300px;
}

.line-chart-section .chart-content {
  height: calc(100% - 30px);
}

/* Element Plus 表格样式覆盖 */
:deep(.el-table) {
  background-color: transparent !important;
}

:deep(.el-table tr) {
  background-color: #071526 !important;
}

:deep(.el-table th.el-table__cell) {
  background-color: #0a2744 !important;
}

:deep(.el-table--border .el-table__inner-wrapper::after),
:deep(.el-table--border::after) {
  background-color: #33f2dc;
}

:deep(.el-table--border .el-table__inner-wrapper::before),
:deep(.el-table--border::before) {
  background-color: #33f2dc;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-color: #33f2dc;
}

:deep(.el-table--border .el-table__cell) {
  border-right: 1px solid #33f2dc;
}

/* 顶部导航样式 */
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: linear-gradient(90deg, 
    rgba(0,10,30,0.8) 0%,
    rgba(0,42,89,0.8) 50%,
    rgba(0,10,30,0.8) 100%
  );
  position: relative;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  height: 40px;
}

.divider {
  width: 1px;
  height: 24px;
  background: rgba(51, 242, 220, 0.3);
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #33f2dc;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(51, 242, 220, 0.5);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.weather {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #33f2dc;
  font-size: 16px;
}

.weather .el-icon {
  font-size: 24px;
}

/* 装饰线条 */
.decoration-line {
  height: 4px;
  display: flex;
  justify-content: space-between;
  background: #001529;
}

.line-left, .line-right {
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(51, 242, 220, 0) 0%,
    rgba(51, 242, 220, 1) 50%,
    rgba(51, 242, 220, 0) 100%
  );
}

.line-right {
  transform: rotate(180deg);
}

/* 按钮样式覆盖 */
:deep(.el-button--text) {
  color: #33f2dc;
  font-size: 16px;
}

:deep(.el-button--text:hover) {
  color: #fff;
}
</style> 